import { request } from "../../request/index.js";
Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 左侧菜单数据
        leftMenuList: [],
        // 右侧商品数据
        rightContent: [],
        // 被点击的左侧菜单
        currentIndex: 0,
        // 要滚动的高度
        scrollTops: 0,
        // 用于实现左边联动右边
        rightCur: 0,
    },
    // 接口返回数据
    Cates: [],
    // 为了方便 设置 全局对象 商品对象
    GoodsInfo: {},

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
        /* 
        0 web中的本地存储和 小程序中的本地存储的区别
          1 写代码的方式不一样
            web: localStorage.setItem("key","value"); localStorage.getItem("key");
            小程序: wx.setStorageSync("key", "value"); wx.getStorageSync("key");
          2 存的时候 是否做了类型转换
            web: 不管存入的是什么类型的数据，最终都会先调用以下 toString{}，把数据变成了字符串 再存入进去
            小程序：不存在 类型转换这个操作 存什么类型的数据进去，获取的时候就是什么类型
        1 先判断本地存储中是否存有旧数据
          {time:Data.now(),data:[...]}
        2 没有旧数据 直接发送新请求
        3 有旧数据 且 旧数据未过期 就使用 本地存储中的旧数据
        */

        // 1 获取本地存储中的数据
        const Cates = wx.getStorageSync("cates");
        // 2 判断
        if (!Cates) {
            // 不存在 发送请求获取数据
            this.getCates();
        } else {
            // 有旧的数据 定义过期事件 5min
            if (Date.now() - Cates.time > 1000 * 300) {
                // 重新发送请求
                this.getCates();
            } else {
                // 可以使用旧的数据
                this.Cates = Cates.data;
                let leftMenuList = this.Cates.map(v => v.category);
                let rightContent = this.Cates;
                this.setData({
                    leftMenuList,
                    rightContent
                })
            }
        }


    },

    // 获取分类数据
    async getCates() {

        // 1 使用es7的async await来发送请求
        const res = await request({ url: "/category/getAllclassification" });
        this.Cates = res.data.data;

        // 把接口的数据存入到本地存储中
        wx.setStorageSync("cates", { time: Date.now(), data: this.Cates })

        // 构造左侧大菜单数据
        let leftMenuList = this.Cates.map(v => v.category);
        // 构造右侧商品数据
        let rightContent = this.Cates;
        this.setData({
            leftMenuList,
            rightContent
        })

    },

    // 切换左边菜单并联动右边
    handleItemTap(e) {
        /*
        1 获取被点击的标题身上的索引
        2 给data中的currentIndex赋值就可以了
        3 根据不同的索引来渲染右侧商品内容
        */
        const { index } = e.currentTarget.dataset;
        let rightContent = this.Cates;
        this.setData({
            currentIndex: index,
            rightCur: index,
            rightContent,
            // 实现左边自动滑动到某个位置 4表示自动滑动到 第五项 （4为索引值）
            scrollTops: (index - 4) * 50
        })
    },

    /**
     * 1 滑动右边对应左边菜单切换
     *   1 拿到该元素的高度，设定它的top和bottom
     *   2 判断滑动的距离是否大于 设定的top并小于设定的bottom，然后对应左边菜单的滑动
     */
    handlescrollLink(e) {
        let list = this.data.rightContent
        let itemHeight = 0;
        for (let i = 0; i < list.length; i++) {
            //拿到每个元素
            let els = wx.createSelectorQuery().select("#scroll-" + i);
            els.fields({
                size: true
            }, function(res) {
                list[i].top = itemHeight;
                itemHeight += res.height;
                list[i].bottom = itemHeight
            }).exec()
        }

        this.setData({
            rightContent: list
        })

        // 拿到滚动的高度
        let scrollTop = e.detail.scrollTop;
        for (let i = 0; i < list.length; i++) {
            if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
                this.setData({
                    currentIndex: i,
                    scrollTops: (i - 4) * 50
                })
                return false
            }
        }
    },

    // 点击加入购物车
    async handleCartAdd(e) {
        // 1 获取缓存中的购物车 数组
        let cart = wx.getStorageSync("cart") || [];
        // 2 判断 商品对象是否存在于购物车数组中
        const goods_id = e.currentTarget.dataset.id;
        const goodsObj = await request({ url: "/goods/getByGoods_id", data: { goods_id } });
        this.GoodsInfo = goodsObj.data.data[0];
        let index = cart.findIndex(v => v.goodsId === this.GoodsInfo.goodsId);
        if (index === -1) {
            // 3 不存在 第一次添加
            this.GoodsInfo.num = 1;
            this.GoodsInfo.checked = true;
            cart.push(this.GoodsInfo);
        } else {
            // 4 已经存在购物车数据 执行 num++
            cart[index].num++;
        }
        // 5 把购物车重新添加回缓存中
        wx.setStorageSync("cart", cart);
        // 6 弹窗提示
        wx.showToast({
            title: '加入购物车成功',
            icon: 'success',
            // true 防止用户 手抖 疯狂点击按钮
            mask: true
        });
    }
})